<!-- 培训资源管理 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'traindevices/traindevices' }">培训资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>培训资源管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div
     class="device-replay-list"    
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
        >
      <div class="device-card"   v-for="(resource, index) in devices"  :key="index">
        <div class="card-header">
          <h3>{{ resource.name }}</h3>
          <p>{{ resource.date }}</p>
        </div>
        <div class="card-content">
          <p>{{ resource.description }}</p>
        </div>
        <div class="card-footer">
          <button class="play-button" @click="resourceCheck(resource)">查看</button>
          <button class="delete-button" @click="deleteresource(index, resource)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { resourceList, deptSave, deptDelete } from '../../api/userMG'
export default {
  data() {
    return {
      resourceInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      devices: [], //设备数据列表
      // 分页
      pageparm: {
        currentPage: 1,
        pageSize: 12,
        total: 12
      },
      resource: {
        title: '',
        date: 'date',
        description: ''
      }

    }
  },
  created() {
    this.getdata(this.resourceInline)
  },

  methods: {
    // 获取设备数据
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 23,
        data: [
        { 
          id: 1,
          name: '搅拌机1', 
          date: '2023-04-01', 
          description: '用于混合原材料的主机设备'
        },  
        { 
          id: 2, 
          name: '切割机A',
          date: '2023-03-28', 
          description: '高精度自动切割设备'
        },  
        { 
          id: 3, 
          name: '生产线B', 
          date: '2023-03-20', 
          description: '全自动化生产线，提高生产效率' 
        },  
        { 
          id: 4, 
          name: '打包机C',
          date: '2023-03-15', 
          description: '自动完成产品打包的机器' 
        },  
        { 
          id: 5, 
          name: '烘干炉D', 
          date: '2023-03-10', 
          description: '用于产品烘干的设备，确保产品质量' 
        },  
        { 
          id: 6, 
          name: '输送机E', 
          date: '2023-03-05', 
          description: '负责物料传输的自动化设备' 
        },  
        { 
          id: 7,
          name: '压砖机F',
          date: '2023-02-28', 
          description: '专业用于生产砖块的机器'
        },  
        { 
          id: 8, 
          name: '磨边机G', 
          date: '2023-02-25', 
          description: '对建材边缘进行打磨的设备' 
        },  
        { 
          id: 9, 
          name: '检测台H', 
          date: '2023-02-20', 
          description: '用于检测产品质量的重要设备' 
        },  
        { 
          id: 10,
           name: '涂料机I', 
           date: '2023-02-15', 
           description: '自动为产品涂料的机器，提升产品外观' 
        } 

        ]
      }
      this.loading = false
      this.devices = res.data
      this.pageparm.currentPage = this.resourceInline.page
      this.pageparm.pageSize = this.resourceInline.limit
      this.pageparm.total = res.count
      //测试环境使用模拟数据

      //正式环境 正式环境环境 调用接口
      resourceList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.devices = res.data
            // 分页赋值
            this.pageparm.currentPage = this.resourceInline.page
            this.pageparm.pageSize = this.resourceInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    //
    resourceAdd() {
      // 创建资源对象  
      const resource = {
        title: title,
        date: date,
        description: description || 'No description provided.'
      };
      // 将资源对象添加到数组中  
      devices.push(resource);
    },
    deleteresource(index, item) {
      // 首先，检查 index
      if (index < 0 || index >= devices.length) {
        console.error('Invalid index for resource deletion.');
        return;
      }

      if (devices[index] !== item) {
        console.error('The item to delete does not match the item at the given index.');
        return;
      }  
      axios.delete(`/api/devices/${item.id}`)
        .then(response => {
          if (response.success === 1) {
            // 从本地数组中移除资源  
            devices.splice(index, 1);

            //重新渲染资源列表  
            updateresourceListUI();
          } {
            alert('删除出错了')
          }

        })
        .catch(error => {
          alert('删除出错了')
        });


    },
    // 删除后被调用  
    updateresourceListUI() {

      this.$store.commit('updatedevices', devices);
    },
    //查看资源
    resourceCheck(resource) {
      //触发查看方法
      this.$bus.$emit('resourceCheck', resource);
    }
  }
}
</script>

<style scoped>
.device-replay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.device-card {
  margin: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 300px;
  max-width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

button {
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;

}

button:hover {
  background-color: #eee;
}

.play-button {
  background-color: rgb(6, 131, 12);
  color: #ffffff;
  font-size: 16px;
}

.delete-button {
  background-color: rgb(247, 67, 13);
  color: #ffffff;
  font-size: 16px;
}
</style>

 
 